<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <stock-header></stock-header>
            </el-header>

            <el-main>
                <el-page-header @back="goBack">
                    <template #content>
                    <span class="text-large font-600 mr-3"> 返回 </span>
                    </template>
                </el-page-header>

                <el-tabs v-model="activeName" class="demo-tabs" 
                @tab-change="change">
                    <el-tab-pane label="月分位点表现" name="IndustryMonthLpDetail">
                        <IndustryMonthLpDetail v-if="activeName === 'IndustryMonthLpDetail'"></IndustryMonthLpDetail>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import router from '../router'
import { ref } from 'vue'
import StockHeader from '../components/StockHeader.vue';
import IndustryMonthLpDetail from '../components/IndustryMonthLpDetail.vue';


document.title = "行业分析";  
const activeNameKey = "IdustryActiveName"
const activeName = ref(sessionStorage.getItem(activeNameKey) || 'IndustryMonthLpDetail')

const change = (tabName : string) => {
    sessionStorage.setItem(activeNameKey, tabName)
}

const goBack = () => {
    router.push({path:'/',
    })
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  height: 40px;
  line-height: 40px;
}
</style>